<template>
    <div class="top-box">
        <h3>人气推荐</h3>
        <div class="content" v-for="item in hotGoodsList" :key="item.id">
            <van-card
                :key="item.id"
                :price="item.retail_price"
                :desc="item.goods_brief"
                :title="item.name"
                :thumb="item.list_pic_url"
                @click="clickFn(item.id)"
            />
        </div>
    </div>
    <!-- v-for="item in hotGoodsList -->
</template>

<script>
export default {
    name: 'top',
    props: ['hotGoodsList'],
    created() {
        console.log(555, this.hotGoodsList);
    },
    methods: {
        clickFn(id) {
            this.$router.push({ path: '/productDetail', query: { id: id } })
        }
    }
}
</script>

<style lang="less" scoped>
.top-box {
    h3 {
        font-size: 22px;
        line-height: 60px;
        text-align: center;
    }
}
</style>